<template>
	<view class="hotnewbox">
		<view class="head" style="">
			<view class="headtext" @click="checkTab('1')">
				<span :class="ishot?'clithis':'noclithis'" style="z-index: 99;position: relative;">最热</span>
				<view v-show="ishot" class="pos-abs titleline">
				</view>
			</view>
			<view class="headtext" @click="checkTab('2')">
				<span :class="!ishot?'clithis':'noclithis'" style="z-index: 99;position: relative;">最新</span>
				<view v-show="!ishot" class="pos-abs titleline">
				</view>
			</view>
		</view>
		<ul class="hotnewlist">
			<li @click="toNews(item.id)" class="hotnewli" v-for="(item,index) in newsList" :key="index">
				<view class="top noone">
					<view v-if="item.attachFiles.length" class="top_left">
						<view  class="noimg justify-center align-center" style="" :style="{background:`url('${item.attachFiles[0].url}')`} ">
<!-- 							<image :src="item.attachFiles[0].url" style="width: 248rpx;
							height: 176rpx;"></image> -->
						</view>
					</view>
					<view class="top_right">
						<view class="color303b39 lineclamp2"
							style="line-height: 46rpx;font-size: 36rpx;font-weight: 800;">
							{{item.title}}
						</view>
						<view class=" lineclamp2"
							style="margin-top: 16rpx;font-weight: 500;font-size: 28rpx;color: #576260;line-height: 40rpx;"
							v-html="item.nostyletext.slice(0,150)">
						</view>

					</view>
				</view>
				<view class=" bot justify-between fz24" style="margin-top: 13rpx;color: #7E8987;">
					<view class="">
						已帮助{{item.likeCount}}人
					</view>
					<view class="">
						{{item.updateTime}}
					</view>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
	import {
		getInvitationList
	} from '@/api/api.js'
	export default {
		// props:['creNewsList','hisNewsList','newsList'],
		data(){
			return{
				ishot: true,
				newsList:[],
				hisNewsList:[],
				creNewsList:[],
			}
		},
		created() {
			this.selectNewsList()
		},

		methods:{
			checkTab(e) {
				if ("1" == e) {
					this.ishot = true
					this.newsList = this.hisNewsList
				} else {
					this.ishot = false
					this.newsList = this.creNewsList
				}
			
			},
			toNews(id) {
				uni.navigateTo({
					url: '/pages/forum/forumdetail?id=' + id,
				});
			},
			selectNewsList() {
				let data = {
					"postTypes": ["1", "3", "5"],
					"isAsc": "desc",
					"orderByColumn": "statusTime",
					"pageNum": 1,
					"pageSize": 5
				}
				getInvitationList(data).then(response => {
					this.hisNewsList = response.rows
					this.hisNewsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})
					this.newsList = this.hisNewsList
				})
				let param = {
					"postTypes": ["2", "4", "6"],
					"isAsc": "desc",
					"orderByColumn": "statusTime",
					"pageNum": 1,
					"pageSize": 5
				}
				getInvitationList(param).then(response => {
					this.creNewsList = response.rows
					this.creNewsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hotnewbox {
		border-radius: 24rpx 24rpx 0 0;
		margin-top: 16rpx;
		background: #fff;
		box-sizing: border-box;
		padding: 40rpx 24rpx;

		.head {
			display: flex;
			align-items: center;

			.headtext {
				position: relative;
				width: max-content;
				padding: 0 16rpx;
				margin-right: 45rpx;

				.titleline {
					bottom: 0;
					left: 0;
					height: 16rpx;
					width: 100%;
					background: #00D9B2;
					border-radius: 50rpx;
					z-index: 1;
				}

				.clithis {
					font-weight: 800;
					font-size: 40rpx;
					color: #303B39;
				}

				.noclithis {
					font-weight: 400;
					font-size: 36rpx;
					color: #303B39;

				}
			}

		}

		.hotnewlist .hotnewli:last-child {
			border-bottom: none;
		}

		.hotnewlist {
			.hotnewli {
				padding: 24rpx 0;
				border-bottom: 1rpx dashed #D7DDDC;

				.top {
					display: flex;

					.top_left {
						flex-shrink: 0;
						margin-right: 16rpx;
						width: 248rpx;
						height: 176rpx;

						.noimg {
							width: 248rpx;
							height: 176rpx;
							// background: linear-gradient(147deg, #DEFFF9 0%, #A1F5E4 100%);
							border-radius: 24rpx;
							background-repeat: no-repeat !important;
							background-position: center !important;
							background-size: cover !important;
						}
					}

				}
			}
		}
	}
</style>